<template>
  <div style="line-height: 24px;letter-spacing: 1px;">
    <div
      style="display: flex; border-bottom: 1px solid #fafafa; margin: 6px 0; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; line-break: anywhere;"
      v-for="(item,index) in keys"
      :key="index">
      <div style="width: 120px;font-weight: bold;flex-shrink: 0;">
        {{ item.label }}:
      </div>
      <div class="text" v-html="getText(item.key)"></div>
    </div>
    <div
      style="display: flex; border-bottom: 1px solid #fafafa; margin: 6px 0; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; line-break: anywhere;"
      key="bournDtoList">
      <div style="width: 120px;font-weight: bold;flex-shrink: 0;">
        目的地地接社 :
      </div>
      <div>
        <table>
          <el-table v-loading="loading" :data="infoData.bournDtoList">
            <el-table-column width="130" label="目的地地接社" align="center" prop="bournReception">

            </el-table-column>
            <el-table-column width="80" label="目的地" align="center" prop="bourn">
            </el-table-column>
            <el-table-column width="100" label="联系人" align="center" prop="linkman">
            </el-table-column>
            <el-table-column width="120" label="电话" align="center" prop="linktel">
            </el-table-column>
            <el-table-column width="100" label="许可证" align="center" prop="licence"/>
            <el-table-column width="120" label="详细地址" align="center" prop="locationInfo"/>
          </el-table>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "info",
  props: {
    keys: {
      type: Array,
      default: () => []
    },
    infoData: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    getText(key) {
      let text = this.infoData[key] || ""
      return text.replace(/<br\/>\n/g, "<br/>")
    },
  }
}
</script>
